<template>
	<view class="container">
		<view style="position: relative">
			<textarea class="user-message" placeholder="有什么话想对商家说的" v-model="userMessage" @input="computeLength" auto-focus="true"></textarea>
			<text class="word-length">{{ messageLen }}/140</text>
		</view>

		<view class="submit-wrapper">
			<text class="submit" @tap="submit">提 交</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userMessage: '',
			messageLen: 0
		};
	},
	methods: {
		computeLength() {
			this.messageLen = this.userMessage.length;
		},
		submit() {
			uni.$emit('getUserMessage', this.userMessage);
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;

.container {
	padding: 30rpx;

	.user-message {
		width: auto;
		background-color: #fafafa;
		padding: 20rpx;
		font-size: 30rpx;
	}

	.word-length {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		font-size: 25rpx;
	}

	.submit-wrapper {
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		bottom: 150rpx;
		padding: 0 10%;
		text-align: center;
		color: #fff;

		.submit {
			display: block;
			width: 100%;
			background-color: @theme-color;
			padding: 25rpx 0;
			border-radius: 25rpx;
		}
	}
}
</style>
